{% extends "base_template.html" %}
{% load engine_tags %}
{% load accounts_tags %}

{% block title %}Edit Profile{% endblock %}

{% block body %}

    <div class="ui horizontal segments no-shadow">

        <div class="ui basic compact segment no-shadow">

            <form method="post" class="ui equal width form" action="{% url 'edit_profile' %}">
                {{ form.media }}
                {% csrf_token %}

                {% form_errors form %}

                <div class="fields">
                    <div class="empty form-field field"></div>

                    <div class="required form-field field">
                        <div class="ui form-wrap segment">
                            <label><i class="address card icon"></i>Name </label>
                            {{ form.name }}
                            <div class="muted">
                                Displayed name
                            </div>
                        </div>
                    </div>

                    <div class="empty form-field field"></div>
                </div>

                <div class="fields">
                    <div class="empty form-field field"></div>

                    <div class="required form-field field">
                        <div class="ui form-wrap segment">
                            <label><i class="at icon"></i>Handle</label>
                            {{ form.username }}
                            <div class="muted">
                                Handle may be used to reference you in posts.
                            </div>
                        </div>
                    </div>

                    <div class="empty form-field field"></div>
                </div>
                <div class="fields">
                    <div class="empty form-field field"></div>

                    <div class="required form-field field">
                        <div class="ui form-wrap segment">
                            <label><i class="envelope icon"></i>Email</label>
                            {{ form.email }}
                            <div class="muted">
                                Email used to register to the site.
                            </div>
                        </div>
                    </div>

                    <div class="empty form-field field"></div>
                </div>

                <div class="fields">

                    <div class="field">
                        <div class="ui form-wrap segment">
                            <label><i class="linkify icon"></i>Website</label>
                            {{ form.website }}
                            <div class="muted">
                                URL to your website
                            </div>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui form-wrap segment">
                            <label><i class="map marker alternate icon"></i>Location</label>
                            {{ form.location }}
                            <div class="muted">
                                Country/City/Institution
                            </div>
                        </div>
                    </div>


                </div>


                <div class="fields">
                    <div class="field">
                        <div class="ui form-wrap segment">

                            <label><i class="twitter icon"></i>Twitter id</label>
                            {{ form.twitter }}
                            <div class="muted">
                                Your twitter id
                            </div>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui form-wrap segment">
                            <label><i class="google icon"></i>Scholar</label>
                            {{ form.scholar }}
                            <div class="muted">
                                Your Google Scholar ID
                            </div>
                        </div>
                    </div>
                </div>

                <div class="fields">

                    <div class="field">
                        <div class="ui form-wrap segment" style="display: grid">
                            <label><i class="bell icon"></i>Notifications </label>
                            {{ form.message_prefs }}
                            <div class="muted">
                                {{ form.message_prefs.help_text }}
                            </div>
                        </div>
                    </div>

                </div>

                <div class="fields">

                    <div class="field">
                        <div class="ui form-wrap segment" style="display: grid">
                            <label><i class="info icon"></i>Description</label>
                            {{ form.text }}
                            <div class="muted">
                                {{ form.text.help_text }}
                            </div>
                        </div>
                    </div>

                </div>

                <button type="submit" class="ui submit green button">
                    <i class="save icon"></i>Submit
                </button>

                <a class="ui right floated button" href="{% url "user_profile" user.profile.uid %}">
                    <i class="undo icon"></i>Cancel
                </a>


            </form>
        </div>

    </div>


{% endblock %}

